<template>
  <div class="app-container Email-container nohead">
    <el-tabs tab-position="left" style="height:100%" v-model="activeTab"
      :before-leave="beforeLeaveTab">
      <el-tab-pane name="writeMail">
        <span slot="label"><i class="icon-ym icon-ym-btn-edit"></i>写邮件</span>
      </el-tab-pane>
      <el-tab-pane name="inBox">
        <span slot="label"><i class="icon-ym icon-ym-extend-envelope"></i>收件箱</span>
      </el-tab-pane>
      <el-tab-pane name="star">
        <span slot="label"><i class="icon-ym icon-ym-extend-star"></i>星标件</span>
      </el-tab-pane>
      <el-tab-pane name="draft">
        <span slot="label"><i class="icon-ym icon-ym-extend-exclamation-triangle"></i>草稿箱</span>
      </el-tab-pane>
      <el-tab-pane name="sent">
        <span slot="label"><i class="icon-ym icon-ym-extend-paper-plane"></i>已发送</span>
      </el-tab-pane>
      <el-tab-pane name="setAccount">
        <span slot="label"><i class="icon-ym icon-ym-extend-cog"></i>邮箱配置</span>
      </el-tab-pane>
      <div class="main JNPF-flex-main">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="6">
              <el-form-item label="关键词">
                <el-input v-model="keyword" placeholder="请输入关键词查询" clearable
                  @keyup.enter.native="search()" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="日期">
                <el-date-picker v-model="pickerVal" type="daterange" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions" value-format="timestamp"
                  clearable :editable="false">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">
                  {{$t('common.search')}}</el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                </el-button>
              </el-form-item>
            </el-col>
          </el-form>
          <div class="JNPF-common-search-box-right">
            <el-button type="primary" icon="el-icon-download" @click="receiveEmail"
              :loading="receiveing">收邮件</el-button>
          </div>
        </el-row>
        <JNPF-table v-loading="listLoading" :data="list">
          <el-table-column prop="isRead" label="" width="40">
            <template slot-scope="scope">
              <template v-if="activeTab==='inBox'|| activeTab==='star'">
                <span v-if=" scope.row.isRead">
                  <i class="icon-ym icon-ym-extend-envelope-open-o i-default" title='点击标记为未读'
                    @click="ReceiveUnread(scope.row)"></i></span>
                <span v-else><i class="icon-ym icon-ym-extend-envelope text-warning" title='点击标记为已读'
                    @click="ReceiveRead(scope.row)"></i></span>
              </template>
              <span v-else><i class="icon-ym icon-ym-extend-envelope-open-o i-default"></i></span>
            </template>
          </el-table-column>
          <el-table-column prop="attachment" label="" width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.attachment && JSON.parse(scope.row.attachment).length"><i
                  class="icon-ym icon-ym-extend-paperclip i-default"></i></span>
            </template>
          </el-table-column>
          <el-table-column prop="sender" label="发件人" width="180"
            v-if="activeTab==='inBox'|| activeTab==='star'" />
          <el-table-column prop="recipient" label="收件人" width="180"
            v-if="activeTab==='draft'|| activeTab==='sent'" />
          <el-table-column prop="subject" label="主题" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link @click="write(scope.row.id)" style="font-size:12px"
                v-if="activeTab==='draft'">
                {{ scope.row.subject }}
              </el-link>
              <el-link @click="readInfo(scope.row.id,activeTab==='sent',scope.$index)"
                style="font-size:12px" v-else>
                {{ scope.row.subject }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="creatorTime" label="时间" width="120">
            <template slot-scope="scope">
              <span v-if="activeTab==='inBox'|| activeTab==='star'">
                {{ scope.row.fdate | toDate() }}</span>
              <span v-if="activeTab==='draft'|| activeTab==='sent'">
                {{ scope.row.creatorTime | toDate() }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="starred" label="" width="40"
            v-if="activeTab==='inBox'|| activeTab==='star'">
            <template slot-scope="scope">
              <span v-if="scope.row.starred"><i
                  class="icon-ym icon-ym-extend-star text-warning img-star" title='点击取消星标'
                  @click="ReceiveNoStarred(scope.row,scope.$index)"></i></span>
              <span v-else><i class="icon-ym icon-ym-extend-star-o i-default img-star"
                  title='点击标记为星标邮件' @click="ReceiveYesStarred(scope.row)"></i></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="50">
            <template slot-scope="scope">
              <el-button size="mini" type="text" class="JNPF-table-delBtn"
                @click="handleDel(scope.$index,scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </el-tabs>
    <Config v-if="configVisible" ref="config" />
    <Form v-show="formVisible" ref="Form" @close="formVisible=false" @refresh="refresh" />
    <Detail v-show="detailVisible" ref="detail" @close="detailVisible=false" @setRead="setRead" />
  </div>
</template>

<script>
import { EmailList, Receive, Delete, ReceiveRead, ReceiveUnread, ReceiveYesStarred, ReceiveNoStarred } from '@/api/extend/email'
import Config from './Config'
import Form from './Form'
import Detail from './Detail'

export default {
  name: 'extend-email',
  components: { Config, Form, Detail },
  data() {
    return {
      receiveing: false,
      configVisible: false,
      formVisible: false,
      detailVisible: false,
      subordinateIds: [],
      activeTab: 'inBox',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      pickerVal: [],
      keyword: '',
      startTime: '',
      endTime: '',
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc'
      },
      list: []
    }
  },
  watch: {
    activeTab(val) {
      this.reset()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    reset() {
      this.list = []
      this.keyword = ''
      this.pickerVal = ''
      this.startTime = ''
      this.endTime = ''
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc'
      }
      this.initData()
    },
    initData() {
      this.listLoading = true
      let data = {
        ...this.listQuery,
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
        type: this.activeTab
      }
      EmailList(data).then(res => {
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    beforeLeaveTab(activeName, oldActiveName) {
      let noChangeList = ['writeMail', 'setAccount', 'Personal', 'Work', 'Business', 'Clients']
      if (noChangeList.indexOf(activeName) > -1) {
        if (activeName === 'setAccount') {
          this.configVisible = true
          this.$nextTick(() => {
            this.$refs.config.init()
          })
        }
        if (activeName === 'writeMail') {
          this.write()
        }
        return false
      }
    },
    search() {
      if (this.pickerVal && this.pickerVal.length) {
        this.startTime = this.pickerVal[0]
        this.endTime = this.pickerVal[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc'
      }
      this.initData()
    },
    readInfo(id, isSend, index) {
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.detail.init(id, isSend, index)
      })
    },
    write(id) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.Form.init(id)
      })
    },
    // 收邮件
    receiveEmail() {
      this.receiveing = true
      Receive().then(res => {
        this.receiveing = false
        this.$message({
          message: `收件成功${res.data}条`,
          type: 'success',
          duration: 1000,
          onClose: () => { }
        })
        if (this.activeTab == 'inBox') {
          this.reset()
        } else {
          this.activeTab = 'inBox'
        }
      }).catch(() => {
        this.receiveing = false
      })
    },
    handleDel(index, id) {
      this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
        type: 'warning'
      }).then(() => {
        Delete(id).then(res => {
          this.list.splice(index, 1);
          this.$message({
            type: 'success',
            message: res.msg
          });
        })
      }).catch(() => { });
    },
    ReceiveRead(row) {
      ReceiveRead(row.id).then(res => {
        row.isRead = 1
        this.$message({
          type: 'success',
          message: res.msg
        });
      })
    },
    ReceiveUnread(row) {
      ReceiveUnread(row.id).then(res => {
        row.isRead = 0
        this.$message({
          type: 'success',
          message: res.msg
        });
      })
    },
    ReceiveYesStarred(row) {
      ReceiveYesStarred(row.id).then(res => {
        row.starred = 1
        this.$message({
          type: 'success',
          message: res.msg
        });
      })
    },
    ReceiveNoStarred(row, index) {
      ReceiveNoStarred(row.id).then(res => {
        if (this.activeTab === 'star') {
          this.list.splice(index, 1);
        } else {
          row.starred = 0
        }
        this.$message({
          type: 'success',
          message: res.msg
        });
      })
    },
    move(id, key) {
      // console.log(id, key);
    },
    setRead(index) {
      this.list[index].isRead = 1
    },
    refresh(isSend) {
      this.formVisible = false
      if (isSend) {
        if (this.activeTab === 'sent') {
          this.reset()
        } else {
          this.activeTab = 'sent'
        }
      } else {
        if (this.activeTab === 'draft') {
          this.reset()
        } else {
          this.activeTab = 'draft'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.Email-container {
  position: relative;
  .JNPF-common-search-box {
    margin-bottom: 0;
  }
  >>> .el-tabs__item {
    text-align: left !important;
    width: 160px !important;
    .icon-ym {
      font-size: 14px;
      margin-right: 8px;
    }
    .ym-custom {
      font-size: 12px;
      margin-right: 10px;
    }
  }
  >>> .el-tabs__content {
    height: 100%;
    // .el-tab-pane {
    //   height: 100%;
    //   overflow: hidden;
    // }
  }
  >>> #tab-line {
    height: 20px;
    width: 160px;
    &::after {
      position: absolute;
      width: 100%;
      height: 1px;
      background: #ddd;
      content: '';
      display: block;
      overflow: hidden;
      top: 10px;
      left: 0;
    }
  }
  .main {
    height: 100%;
    overflow: hidden;
    .icon-ym {
      cursor: pointer;
      font-size: 14px;
      &.img-star {
        font-size: 16px;
      }
    }
  }
}
</style>